<template>
  <div class="app-container">
    <TheHeader />
    <div class="main-content">
      <router-view />
    </div>
    <TheFooter />
  </div>
</template>

<script setup lang="ts">
import TheHeader from '@/components/TheHeader.vue'
import TheFooter from '@/components/TheFooter.vue'
</script>

<style>
:root {
  --primary-bg: #f7f8f8;
  --text-color: #212d37;
  --accent-color: #f2151c;
  --tag-color: #4eadb3;
  --border-color: #e4e7ed;
  --card-bg: #ffffff;
}

body {
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  color: var(--text-color);
  background-color: var(--primary-bg);
  margin: 0;
  padding: 0;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
</style>
